
@import 'variables';
@import 'mixins';

$blog-margin-big: 70px;
$blog-margin-small: 35px;


.blog-post {
  margin-bottom: $blog-margin-big;
}

.blog-post__title {
  font-weight: $font-weight-bold;
  font-size: 26px;
  margin-bottom: $blog-margin-small;

  a:hover { // always have a hover effect
    color: $link-color;
    text-decoration: underline;
  }
}

.blog-post__title--link { // will display it as a link
  a {
    color: $link-color;
  }
}

.blog-post__comment-count {
  margin-bottom: $blog-margin-small;

  a {
    @include link-normal;
  }
}

.blog-post__more-link {
  white-space: nowrap;

  &:after {
    content: " \02192"; // right arrow
  }
}

.blog-post__meta {
  margin-top: $blog-margin-small;
  color: $font-color-weak;
}

.blog-post__content {
  img {
    max-width: 100%;
  }
}


.blog-pager {
  @include clearfix;

  a {
    @include link-normal;
  }
}

.blog-pager__prev {
  float: left;

  &:before {
    content: "\02190 "; // right arrow
  }
}

.blog-pager__next {
  float: right;

  &:after {
    content: " \02192"; // right arrow
  }
}


.comment-warning {
  margin: $blog-margin-big 0;
  border: 3px solid $yellow-highlight-color;
  padding: 4px 8px;
  border-radius: 4px;

  a {
    @include link-normal;
  }
}


.blog-post-sidebar__advanced {
  margin-bottom: 3em;
}

.blog-post-sidebar__title {
  @include title;
  margin-bottom: 1em;
}

.blog-post-sidebar__list {

  a {
    @include link-normal;
  }

  li {
    margin: .8em 0;
  }
}


// For the 10-year birthday post

$vtimeline-line: 2px;
$vtimeline-dot-radius: 7px;
$vtimeline-dot-top: 14px;
$vtimeline-dot-left: -28px;
$vtimeline-fade: 40px;

.vtimeline {
  border-left: $vtimeline-line solid $control-border-color-light;
  position: relative;

  &:before {
    content: "";
    width: $vtimeline-line;
    height: $vtimeline-fade;
    position: absolute;
    top: -$vtimeline-fade;
    left: -$vtimeline-line;
    background: linear-gradient(180deg, #fff 0%, $control-border-color-light 100%);
  }

  &:after {
    content: "";
    width: $vtimeline-line;
    height: $vtimeline-fade;
    position: absolute;
    left: -$vtimeline-line;
    bottom: 0;
    background: linear-gradient(0deg, #fff 0%, $control-border-color-light 100%);
  }
}

.vtimeline__event {
  padding-left: 20px;
  clear: both;

  h2 {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: $vtimeline-dot-top;
      left: $vtimeline-dot-left;
      width: 0;
      height: 0;
      border-radius: $vtimeline-dot-radius;
      border: $vtimeline-dot-radius solid $control-border-color-light;
    }

    &:after {
      content: "";
      position: absolute;
      top: $vtimeline-dot-top + $vtimeline-line;
      left: $vtimeline-dot-left + $vtimeline-line;
      width: 0;
      height: 0;
      border-radius: $vtimeline-dot-radius - $vtimeline-line;
      border: ($vtimeline-dot-radius - $vtimeline-line) solid #fff;
    }
  }
}

.vtimeline__date {
  font-size: $font-size;
  font-weight: $font-weight-normal;
  color: $font-color-weak;
  margin-left: 10px;
  white-space: nowrap;
}

.float-image {
  clear: right;
  float: right;
}

.indented {
  margin-left: 2em;
}

@media only screen and (max-width: $one-col-breakpoint) {

  .float-image {
    float: none;
    margin: 0 !important;
  }

  .indented {
    margin-left: 0;
  }

}
